<!--
 * @Description: 用户信息管理组件
 * @Author: [您的名字]
 * @Date: [创建日期]
 * @LastEditors: [最后编辑者]
 * @LastEditTime: [最后编辑时间]
 * @Features: 
 *  1. 用户信息查询
 *  2. 条件筛选
 *  3. 分页展示
 *  4. 数据统计
-->
<template>
  <!-- 用户信息主容器 -->
  <div class="role-information">
    <!-- 标题区域 -->
    <el-row class="header-section">
      <el-col>
        <div class="title">
          <h2 class="title-text">用户信息</h2>
        </div>
      </el-col>
    </el-row>

    <!-- 搜索区域 -->
    <div class="search-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input 
            placeholder="用户ID/手机号/用户昵称" 
            v-model="param.input" 
            clearable
            prefix-icon="el-icon-search">
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-date-picker
            v-model="param.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="date-picker"
          ></el-date-picker>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="mt-20">
        <el-col :span="8">
          <div class="amount-range">
            <span class="range-label">消费金额：</span>
            <el-input placeholder="最小金额" v-model="param.minMoney" clearable class="range-input"></el-input>
            <span class="separator">-</span>
            <el-input placeholder="最大金额" v-model="param.maxMoney" clearable class="range-input"></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="amount-range">
            <span class="range-label">订单数量：</span>
            <el-input placeholder="最小数量" v-model="param.minOrderNumber" clearable class="range-input"></el-input>
            <span class="separator">-</span>
            <el-input placeholder="最大数量" v-model="param.maxOrderNumber" clearable class="range-input"></el-input>
          </div>
        </el-col>
        <el-col :span="4" class="search-buttons">
          <el-button type="primary" @click="queryUser" icon="el-icon-search">查询</el-button>
          <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 结果统计 -->
    <div class="result-summary">
      查询结果：共计 <span class="highlight">{{ total }}</span> 条记录
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-table 
        :data="userList" 
        border 
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column prop="id" label="用户ID" width="180"></el-table-column>
        <el-table-column prop="userName" label="用户昵称" width="150"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
        <el-table-column prop="registrationTime" label="注册时间" width="180"></el-table-column>
        <el-table-column prop="loginTime" label="最近登录时间" width="180"></el-table-column>
        <el-table-column prop="consumptionAmount" label="消费金额" width="120">
          <template slot-scope="scope">
            <span class="amount">¥{{ scope.row.consumptionAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderNumber" label="订单数量">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.orderNumber }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @next-click="nextPage"
        @prev-click="prevPage"
        @current-change="pageChange"
        @size-change="sizeChange"
        background
      ></el-pagination>
    </div>
  </div>
</template>

<script>
/**
 * @description 用户信息管理组件
 */
export default {
  name: 'RoleInformation',

  /**
   * @description 组件数据
   * @return {Object}
   */
  data() {
    return {
      param: {}, // 查询参数对象
      total: 0, // 数据总条数
      pageSize: 10, // 每页显示条数
      pageNum: 1, // 当前页码
      userList: [] // 用户列表数据
    };
  },

  methods: {
    /**
     * @description 查询用户列表数据
     * @return {void}
     */
    queryUser() {
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = this.param;

      this.$axios.post("/api/user/queryUser", pageParam).then(res => {
        if (res.data.code == 200) {
          this.userList = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },

    /**
     * @description 重置查询条件
     * @return {void}
     */
    reset() {
      this.param = {};
    },

    /**
     * @description 下一页按钮点击处理
     * @param {number} val - 目标页码
     * @return {void}
     */
    nextPage(val) {
      this.pageNum = val;
      this.queryUser();
    },

    /**
     * @description 上一页按钮点击处理
     * @param {number} val - 目标页码
     * @return {void}
     */
    prevPage(val) {
      this.pageNum = val;
      this.queryUser();
    },

    /**
     * @description 页码改变处理
     * @param {number} val - 目标页码
     * @return {void}
     */
    pageChange(val) {
      this.pageNum = val;
      this.queryUser();
    },

    /**
     * @description 每页条数改变处理
     * @param {number} val - 新的每页条数
     * @return {void}
     */
    sizeChange(val) {
      this.pageSize = val;
      this.queryUser();
    }
  },

  /**
   * @description 组件创建时的生命周期钩子
   * @return {void}
   */
  created() {
    this.queryUser(); // 初始化时获取用户列表数据
  }
};
</script>

<style scoped>
/* 主容器样式 */
.role-information {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.header-section {
  margin-bottom: 24px;
}

.title-text {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  padding-left: 12px;
}

.title-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background-color: #409EFF;
  border-radius: 2px;
}

.search-section {
  background-color: #f8f9fa;
  padding: 24px;
  border-radius: 6px;
  margin-bottom: 24px;
}

.mt-20 {
  margin-top: 20px;
}

.amount-range {
  display: flex;
  align-items: center;
}

.range-label {
  color: #606266;
  margin-right: 8px;
  white-space: nowrap;
}

.range-input {
  width: 120px;
}

.separator {
  margin: 0 8px;
  color: #909399;
}

.search-buttons {
  text-align: right;
}

.search-buttons .el-button {
  margin-left: 12px;
}

.result-summary {
  margin: 16px 0;
  color: #606266;
}

.highlight {
  color: #409EFF;
  font-weight: bold;
  margin: 0 4px;
}

.table-section {
  margin-bottom: 24px;
}

.amount {
  color: #f56c6c;
  font-weight: 500;
}

.pagination-section {
  text-align: right;
  margin-top: 20px;
}

.el-table {
  margin-top: 16px;
}

.date-picker {
  width: 100%;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .range-input {
    width: 100px;
  }
}

@media screen and (max-width: 768px) {
  .search-section {
    padding: 16px;
  }
  
  .role-information {
    padding: 16px;
  }
}
</style>